<template>
  <f7-page>
    <f7-navbar :title="$t('m.up1')" back-link=" "></f7-navbar>

    <div class="content-padding">

      <f7-list class="user-profile-list">
        <f7-list-item :title="$t('m.up2')" class="file-position" no-fast-click no-link-class	>
          <img :src="userInfo.pic || require('../static/logo.png')" alt="" slot="after">
          <input type="file" @change="handleUpload">
        </f7-list-item>
        <f7-list-item :title="$t('m.up3')" after="922107"></f7-list-item>
        <f7-list-item :title="$t('m.up4')" :after="userInfo.nick || $t('m.up10')" link @click="editNick"></f7-list-item>
        <f7-list-item :title="$t('m.up5')" :after="userInfo.sex === '1'?'男':'女'" link @click="genderActionsheet = true"></f7-list-item>
        <f7-list-item :title="$t('m.up6')" :after="userInfo.phone" link="/update-phone/"></f7-list-item>
<!--        <f7-list-item title="商家手机号" after="未绑定" link @click="$toast('暂未设置商家手机号')"></f7-list-item>-->
        <f7-list-item :title="$t('m.up7')" :after="userInfo.email || $t('m.up11')" link="/bind-email/"></f7-list-item>
        <f7-list-item :title="$t('m.up8')" :after="userInfo.audit === '0'?$t('m.up11'):userInfo.audit === '1'?$t('m.up12'):$t('m.up13')" link="/verified/"></f7-list-item>
        <f7-list-item :title="$t('m.up9')" after="" link @click="payTypes"></f7-list-item>
      </f7-list>

    </div>


    <f7-actions :opened="genderActionsheet" @actions:closed="genderActionsheet = false">
      <f7-actions-group>
        <f7-actions-label>{{$t('m.up5')}}</f7-actions-label>
        <f7-actions-button @click="setGender(1)">{{$t('m.up14')}}</f7-actions-button>
        <f7-actions-button @click="setGender(2)">{{$t('m.up15')}}</f7-actions-button>
      </f7-actions-group>
    </f7-actions>
  </f7-page>
</template>

<script>
  import { updateNick, updateGender, updateAvatar } from "../api/my";
  import { uploadImage } from "../api";

  export default {
    name: "user-profile",
    data () {
      return {
        genderActionsheet: false
      }
    },
    computed: {
      userInfo() {
        return this.$store.getters.userInfo.user;
      }
    },
    methods: {
      editNick() {
        this.$f7.dialog.prompt('',this.$t('m.up16'),(value)=>{
          console.log(value);
          if(value) {
            updateNick({nick: value}).then(() => {

            })
          }
        },()=> {

        }, '')
      },
      setGender (sex) {
        updateGender({sex}).then(()=>{

        })
      },
      payTypes () {
        if (1 === 2) {
          this.$f7router.navigate('/set-pay-password/')
        } else {
          this.$f7router.navigate('/my-pay-types/')
        }
      },
      handleUpload(e) {
        const file = e.target.files[0];
        const render = new FileReader();
        render.readAsDataURL(file);
        render.onload = (res) => {
          uploadImage({image: res.target.result}).then(res => {
            // this.formItems.image = res.url.url;
            e.value = '';
            updateAvatar({pic: res.url.url}).then(() => {

            })
          })
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .content-padding {
    margin-top: $padding20;
  }
  .user-profile-list {
    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
  }
</style>
